<template>
  <div class="dashboard-container">
    <div class="breadcrumb-container flex-row">
      <breadcrumb />
    </div>
    <el-divider />
    <br>
    <br>
    <div class="">
      <el-form ref="postForm" :model="postForm" :rules="rules" label-width="85px" class="">
        <el-form-item label="名称:" class="addClo">
          <el-row :xs="24" :sm="24" :lg="24">
            <el-col :xs="24" :sm="20" :lg="20" class="mtright">
              <el-input v-model="postForm.title" placeholder="请输入名称" aria-required="true" class="pad0" />
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item label="icon:" class="addClo">
          <el-row :xs="24" :sm="24" :lg="24">
            <el-col :xs="24" :sm="20" :lg="20" class="mtright">
              <Upload v-model="postForm.poster" class="fileUp" :urls="postForm.poster" :maxcount="1" title="" format="jpg,jpeg,gif,png" @getImage="changePoster" />
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item label="主图:" class="addClo">
          <el-row :xs="24" :sm="24" :lg="24">
            <el-col :xs="24" :sm="20" :lg="20" class="mtright">
              <Upload v-model="postForm.cover" class="fileUp" :urls="postForm.cover" :maxcount="1" title="" format="jpg,jpeg,gif,png" @getImage="changeCover" />
            </el-col>
          </el-row>
        </el-form-item>

        <!-- <el-row :xs="24" :sm="24" :lg="24"> -->
        <el-form-item label="标签:" label-width="85px">
          <div v-for="(item,index) in divTag" :key="index" class="divTag">
            <el-col :xs="10" :sm="10" :lg="10" class="mtright">
              <el-input v-model="item.tags" placeholder="请输入标签" />
            </el-col>
            <i v-if="index == 0" @click="addTag">+</i>
            <i v-if="index >= 1" @click="removeTag(index)">-</i>
          </div>
        </el-form-item>
        <!-- </el-row> -->

        <el-form-item label="服务详情:" label-width="85px" class="addClo">
          <el-row :xs="24" :sm="24" :lg="24">
            <el-col :xs="24" :sm="20" :lg="20" class="mtright">
              <Tinymce ref="editor" v-model="postForm.content" :height="400" />
            </el-col>
          </el-row>
        </el-form-item>

      </el-form>
      <div class="wap">
        <ul>
          <li class="titOP">{{ postForm.title }}</li>
          <li v-html="postForm.content" />
        </ul>
      </div>
    </div>
    <br>
    <div class="text-center btnWidth">
      <el-button v-loading="loading" class="add" @click="publish()">发布</el-button>
      <el-button v-loading="loading" class="addSave" @click="saveToDraft()">保存草稿</el-button>
      <el-button v-loading="loading" class="addNot" @click="cancel()">取消</el-button>
    </div>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import Upload from '@/components/Upload/SingleImage'
import Tinymce from '@/components/Tinymce'
import { add, update } from '@/api/serviceItem'

export default {
  components: {
    Upload,
    Tinymce,
    Breadcrumb
  },
  data() {
    const validateRequire = (rule, value, callback) => {
      if (value === '') {
        this.$message({
          message: rule.field + '为必传项',
          type: 'error'
        })
        callback(new Error(rule.field + '为必传项'))
      } else {
        callback()
      }
    }
    return {
      divTag: [{ tags: '' }],
      id: '',
      activeName: 'first',
      true: false,
      loading: false,
      textarea2: '',
      tab: 1,
      postForm: {},
      rules: {
        title: [{ required: true, validator: validateRequire, trigger: 'change' }],
        subtitle: [{ required: true, validator: validateRequire, trigger: 'change' }],
        type: [{ required: true, validator: validateRequire, trigger: 'change' }],
        content: [{ required: true, validator: validateRequire, trigger: 'change' }]
      }
    }
  },
  created() {
    this.id = this.$route.query.id

    if (this.id) {
      // getserviceItemById(this.item).then(response => {
      //   this.postForm = response.data
      // })
      this.postForm = JSON.parse(sessionStorage.getItem('sveitem')) || ''
    }
  },
  methods: {
    removeTag(index) {
      this.divTag.splice(index, 1)
    },
    addTag() {
      if (this.divTag[0].tags === '') {
        this.$notify.error({ message: '请填写标签' })
        return
      }
      this.divTag.push({ 'tags': '' })
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    saveToDraft() {
      this.postForm.status = 0
      this.save()
    },
    publish() {
      this.postForm.status = 1
      this.save()
    },
    cancel() {
      this.$router.push({ path: '/operation/service' })
    },
    save() {
      var arr = []
      this.divTag.forEach((item) => {
        if (item.tags !== '' && item.tags !== null && item.tags !== undefined) {
          arr.push(item.tags)
        }
      })
      this.postForm.tag = arr.join(',')
      const data = this.postForm
      this.$refs.postForm.validate(valid => {
        if (valid) {
          this.loading = true
          if (this.id) {
            update(data).then(response => {
              console.log(response)
              this.$notify({
                title: '成功',
                message: '更新成功',
                type: 'success',
                duration: 2000
              })
              this.$router.push({ path: '/operation/service' })
              // todo 这里跳转到服务列表
            })
          } else {
            add(data).then(response => {
              console.log(response)
              this.postForm.id = response.data.id
              this.id = response.data.id
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              })
              this.$router.push({ path: '/operation/service' })
            })
          }
        }
      })
      this.loading = false
    },
    changePoster(val) {
      this.postForm.poster = val.toString()
    },
    changeCover(val) {
      this.postForm.cover = val.toString()
    },
    changeVideo(val) {
      this.postForm.video = val.toString()
    }

  }
}
</script>
<style>
.wscnph{width:100%}
</style>
<style lang="scss">
  .overview-tabs {
    .el-tabs {
      .el-tabs__nav-wrap::after {
        height: 1px;
      }
    }

    .el-tabs__content {
      padding: 17px;
    }
  }
</style>

<style lang="scss" scoped>
.titOP{text-align:center;font-size:28px;padding:5px 0}
.wap{
    height: 703px !important;
    margin: 0 auto;
    padding: 125px 25px 159px 25px;
    width: 387px;
    margin-top: 40px;
    background: url(../../assets/images/bg-mob.png) no-repeat 0 -2217px;
    box-sizing: border-box;
    // background-size:100% 100%
}
.wap ul{height: 415px;
    overflow-y: auto;}
.wap  li img{width:100%}
.wscnph{width:100%}
.formDiv{width: 50%;}
.flex{display:flex;justify-content: space-between;}
  .mtright{margin-left: 27px;}
  .overview-tabs {
    padding: 10px;
  }

  .tab-label {
    width: 76px;
    text-align: center;
    font-size: 14px;
    font-weight: normal;
  }
  .add{background: #5AC6B7;color: #fff;border: 0;border-radius: 2px;}
  .breadcrumb-container {
    position: relative;
    width: 100%;
    height: 60px;
    padding: 0 14px;

    &::after {
      content: '';
      position: absolute;
      left: 0px;
      top: 50%;
      width: 2px;
      height: 37px;
      background-color: #5AC6B7;
      transform: translateY(-50%);
    }
  }
  .fileUp{width: 70px;}
  ::v-deep .upload-container .el-upload{width: 70px;height: 70px;line-height: 80px;}
  .pad0{padding-right: 0;}
  .btnWidth button{width:107px;height: 41px;}
  .addClo{color: #101010!important;}
  //  ::v-deep .editor-custom-btn-container{z-index: 2005;}
  ::v-deep #mceu_24{display:none}
  .divTag i{display: inline-block;border-radius: 50%;margin-bottom: 20px; margin-left: 35px;color: #5AC6B7;border: 1px solid #5AC6B7;width: 24px;height: 24px;text-align: center;line-height: 20px;font-size: 20px;}
</style>
